<template>
  <div class="box">
    <van-nav-bar
      left-arrow
      @click-left='$router.go(-1)'
      title="我的收藏"
      :border="false"
      fixed
    />
    <section>
      <div class="b">
        <van-tabs v-model="activeName" :animated='true' line-height='1'>
          <van-tab title="淘整形" name="a">
            <ul class="Panning" v-if="panning.length">
              <li v-for="(item, index) of panning" :key="index" @click="panningView(item)">
                <div class="body">
                  <img :src="item.pro_pic" alt="">
                  <div class="body-right">
                    <p>{{item.pro_introduce}}</p>
                    <p><i>{{item.clinic_name}}</i><i>{{item.distance + 'km'}}</i></p>
                    <p><span>￥{{item.pro_price}}/次</span><i>{{item.subscribe}}人预定</i></p>
                    <p><button>查看</button></p>
                  </div>
                </div>
                <div class="body-bottom">
                  <span>保障</span>
                  <em>最高可享三个月无费用修复：到店</em>
                </div>
              </li>
              <div class="beauty_line">这是美的底线~</div>
            </ul>
            <div class="noData" v-else>
              <img src="./../../assets/liwudi.png" alt="">
              您还没有收藏商品哦~
            </div>
          </van-tab>
          <van-tab title="日记" name="b">
            <div :activeName='activeName' class="diary" v-if="diaryList.length">
              <div class="diary_list" v-for="(item, index) in diaryList" :key="index" @click="goDiaryDetail(item.diary_id)">
                <img :src="item.diary_issue_pic" alt="">
                <div class="diary_list_text">
                  <p>{{item.diary_issue_content}}</p>
                  <p>
                    <span>{{item.diary_issue_nickname}}</span>
                    <span>{{'阅读量' + item.diary_recommend_viewsNumber}}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="noData" v-else>
              <img src="./../../assets/liwudi.png" alt="">
              <span>您还没有收藏日记哦~</span>
            </div>
          </van-tab>
          <van-tab title="通知" name="c">
            <div :activeName='activeName' class="message" v-if="informList.length">
              <div class="message_list" v-for="(item, index) in informList" :key="index">
                <div class="message_list_user">
                  <img :src="item.message_uservia" alt="">
                  <p>{{item.message_nickname}}</p>
                  <p>{{item.message_timer}}</p>
                </div>
                <div class="message_list_text" v-html="item.message_content"></div>
                <div class="message_list_btn">
                  <span @click="goInformDetail(item.message_id)">查看更多</span>
                </div>
              </div>
            </div>
            <div class="noData" v-else>
              <img src="./../../assets/liwudi.png" alt="">
              您还没有收藏通知哦~
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </section>
  </div>
</template>

<script>
import { getUserCollect } from '../../api'
import Vue from 'vue'
import { NavBar, Tabs, Tab, Button } from 'vant'
Vue.use(NavBar)
Vue.use(Tabs)
Vue.use(Tab)
Vue.use(Button)
export default {
  data () {
    return {
      activeName: 'a',
      panning: [],
      diaryList: [],
      informList: []
    }
  },
  mounted () {
    this.getUserLikeMessageList()
    this.getUserLikeDiaryList()
    this.getUserLikeProList()
  },
  methods: {
    panningView (item) {
      this.$router.push('/proDetail?proid=' + item.proid)
    },
    getUserLikeMessageList () {
      getUserCollect({
        username: localStorage.getItem('userTel_AM'),
        type: '通知'
      }).then(res => {
        if (res.data.code === '200') {
          this.informList = res.data.data
          // console.log(this.informList)
        }
      })
    },
    getUserLikeDiaryList () {
      getUserCollect({
        username: localStorage.getItem('userTel_AM'),
        type: '日记'
      }).then(res => {
        if (res.data.code === '200') {
          this.diaryList = res.data.data
          // console.log(this.diaryList)
        }
      })
    },
    getUserLikeProList () {
      getUserCollect({
        username: localStorage.getItem('userTel_AM'),
        type: '商品'
      }).then(res => {
        if (res.data.code === '200') {
          this.panning = res.data.data
          // console.log(this.panning)
        }
      })
    },
    goInformDetail (messageId) {
      this.$router.push('/inform/informDetail?message_id=' + messageId)
    },
    goDiaryDetail (diaryId) {
      const diaryid = diaryId.toString()
      this.$router.push({ path: '/Redetail/' + 'diary_id=' + diaryid })
    }
  }
}
</script>

<style lang="scss" scoped>
// 百科
.noData {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight:400;
  color:rgba(40,40,40,1);
  opacity:0.5;
  font-size: 0.11rem;
  /* background: url('./../../assets/liwudi.png') no-repeat center 37%;
  background-size: 1.05rem 1.05rem; */
  img{
    height: 1.05rem;
    width: 1.05rem;
    margin-top: -1.5rem;
  }
}
.message {
  .message_list {
    width: 100%;
    height: 1.35rem;
    padding: 0.16rem 0.15rem 0.05rem 0.15rem;
    border-bottom: 1px solid #efefef;
    .message_list_user {
      width: 100%;
      height: 0.35rem;
      margin-bottom: 0.05rem;
      img {
        float: left;
        width: 0.34rem;
        height: 0.34rem;
        float: left;
        margin-right: 0.07rem;
      }
      p {
        float: left;
        width: 3rem;
        height: 0.17rem;
        line-height: 0.17rem;
      }
      p:nth-of-type(1) {
        color: #333333;
        font-size: 0.12rem;
      }
      p:nth-of-type(2) {
        color: #999999;
        font-size: 0.1rem;
      }
    }
    .message_list_text {
      width: 100%;
      height: 0.48rem;
      line-height: 0.16rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .message_list_btn {
      width: 100%;
      height: 0.17rem;
      text-align: right;
      margin-top: 0.05rem;
      span {
        height: 0.17rem;
        display: inline-block;
        padding: 0 0.04rem;
        line-height: 0.17rem;
        border: 1px solid #FF7BC9;
        box-sizing: border-box;
        border-radius: 0.04rem;
        text-align: center;
        line-height: 0.17rem;
        color: #FF5959;
        font-size: 0.1rem;
      }
    }
  }
}
.diary {
  .diary_list {
    width: 100%;
    height: 1.17rem;
    padding: 0.18rem 0.15rem;
    border-bottom: 1px solid #efefef;
    img {
      float: left;
      width: 0.8rem;
      height: 0.8rem;
      margin-right: 0.15rem;
    }
    .diary_list_text {
      width: 2.5rem;
      height: 0.8rem;
      float: left;
      p:nth-of-type(1) {
        width: 100%;
        height: 0.32rem;
        line-height: 0.16rem;
        font-size: 0.14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #606060;
      }
      p:nth-of-type(2) {
        width: 100%;
        color: #8f8f8f;
        height: 0.12rem;
        margin-top: 0.36rem;
        line-height: 0.12rem;
        span:nth-of-type(1) {
          float: left;
        }
        span:nth-of-type(2) {
          float: right;
        }
      }
    }
  }
}
// 淘整形
.Panning{
  list-style: none;
  li {
    padding: 0.105rem 0.21rem 0.105rem 0.155rem;
    border-bottom: 1px solid #efefef;
    .body{
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
      }
      .body-right{
        margin-left: 0.195rem;
        flex: 1;
        p{
          width: 100%;
          i{
            font-weight:400;
            color:rgba(51,51,51,1);
            font-size:0.12rem;
            opacity:0.6;
          }
          &:nth-of-type(1){
            height: 0.4rem;
            line-height: 0.2rem;
            font-size: 0.15rem;
            font-weight: 400;
            color: rgba(51,51,51,1);
            font-size: 0.15rem;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 0.05rem;
          }
          &:nth-of-type(2){
            display: flex;
            justify-content: space-between;
            margin: 0 0 0.05rem 0;
            i:nth-of-type(1) {
              max-width: 1.6rem;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap
            }
          }
          &:nth-of-type(3){
            span{
              font-weight:400;
              color:rgba(255,89,89,1);
              font-size:0.12rem;
              margin-right: 0.245rem;
            }
          }
          &:nth-of-type(4){
            height: 0.14rem;
            display: flex;
            justify-content: flex-end;
            button{
              font-size: 0.1rem;
              line-height: 0.14rem;
              box-sizing: border-box;
              font-size: 0.085rem;
              font-weight:400;
              width: 0.345rem;
              height: 0.14rem;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #fff;
              text-align: center;
              color:rgba(255,89,89,1);
              border-radius: 0.085rem;
              outline: none;
              border:1px solid rgba(255,123,201,1);
            }
          }
        }
      }
    }
    .body-bottom{
      margin-top: 0.1rem;
      display: flex;
      font-size: 0.11rem;
      color:rgba(22,22,22,1);
      em{
        font-style: normal;
      }
      span{
        width: 0.5rem;
        height: 0.15rem;
        background:rgba(255,215,242,1);
        color:rgba(22,22,22,1);
        font-size:0.1rem;
        border-radius:0.03rem;
        margin-right: 0.105rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .beauty_line{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 1.145rem;
    align-items: center;
    color:rgba(40,40,40,1);
    font-size: 0.11rem;
  }
}
section{
  font-family:PingFang SC;
  overflow: auto;
  flex: 1;
  margin-top: 0.46rem;
  .b {
    height: 100%;
    overflow: hidden;
  }
  /deep/ .van-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    .van-tab{
      font-size: 0.16rem;
    }
    .van-tabs__content {
      flex: 1;
      .van-tab__pane-wrapper {
        overflow: auto;
        .van-tab__pane{
          height: 100%;
        }
      }
    }
  }
  /deep/ .van-tab{
    span{
      font-size: 0.15rem;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
  }
  /deep/ .van-tab--active{
    span {
      font-weight:400;
      color:rgba(51,51,51,1);
      font-size: 0.15rem;
    }
  }
}
/deep/ .van-nav-bar {
  z-index: 100;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
</style>
